<template>
    <div class="qilin-tagsView qilin-pb-2">
        <el-tabs
            v-model="currentTab"
            type="card"
            class="tagsView"
            @tab-remove="removeTab"
        >
            <el-tab-pane
                v-for="item in tagsList.route"
                :key="item.path"
                :name="item.path"
                :closable="item.path !== '/index'"
            >
                <template v-slot:label>
                    <!-- <RouterLink :to="item.path"
                        :class="item.path === route.fullPath ? 'is-active' : '' "
                    >{{item.title}}</RouterLink> -->
                    <span
                        :class="item.path === route.fullPath ? 'is-active' : '' "
                        @click="switchToTab(item.path)"
                    >{{item.title}}</span>
                </template>
            </el-tab-pane>
        </el-tabs>
        <el-popover
            class="operate"
            placement="bottom"
            trigger="click"
            popper-class="qilin-popover"
        >
            <div class="qilin-tagsView-operate-box">
                <ul class="qilin-tagsView-operate-box-list">
                    <li class="qiln-tagsView-operate-box-list-item"
                        v-for="item in tagsList.route"
                        :key="item.path"
                        @click="switchToTab(item.path)"
                    >{{item.title}}</li>
                </ul>
                <div class="qilin-tagsView-operate-all" @click="removeOtherTab()">关闭其他页签</div>
                <div class="qilin-tagsView-operate-all" @click="removeAllTab()">关闭所有页签</div>
            </div>
            <template v-slot:reference>
                <el-icon><MoreFilled /></el-icon>
            </template>
        </el-popover>
    </div>
</template>

<script setup>
import {useRoute,useRouter} from "vue-router";
const route=useRoute();
const router=useRouter();


/*
    数据变量定义区域
*/
// 路由数组集
let tagsList=reactive({
    route:[]
});
// 当前路由路径--主要用于在切换至该tab页签时自动校准位置
let currentTab=ref("/index");


/*
    计算属性等代码区域
*/
watch(route,(newValue,oldValue)=>{
    if (newValue.path === "/login") return;
    setRouteTags(newValue);
});

/*
    逻辑脚本代码区域
*/
// 点击跳转至某个路由页签事件监听
const switchToTab=(path)=>{
    if(route.fullPath === path) return ;
    currentTab.value = path;
    router.push(path);
};
// 点击关闭其他路由页签事件监听
const removeOtherTab=()=>{
    tagsList.route=tagsList.route.filter((item)=>{
        return item.path === route.fullPath;
    });
};
// 点击关闭全部路由页签事件监听
const removeAllTab=()=>{
    if(route.fullPath === "/index"){ //如果当前页签在首页,则关闭其他页签留在首页
        tagsList.route=tagsList.route.filter((item)=>{
            return item.path === route.fullPath;
        });
    }else{ //如果当前页签不在首页，则跳转至首页并关闭其他所有标签页
        tagsList.route=[];
        currentTab.value="/";
        router.push("/");
    };
};
// 点击删除tab页签事件监听
const removeTab=(name)=>{
    const index=tagsList.route.findIndex((item)=>{
        return item.path === name;
    });
    const removeTab=tagsList.route.splice(index,1)[0];
    const item=tagsList.route[index] ? tagsList.route[index] : tagsList.route[index - 1];
    if(item){
        currentTab.value=item.path;
        removeTab.path === route.fullPath && router.push(item.path);
    }else{
        currentTab.value="/";
        router.push("/");
    };
};
// 动态设置路由页签
const setRouteTags=(route)=>{
    currentTab.value = route.fullPath;
    // 判断当前点击这个菜单路由是否已存在路由数组中
    const isExist=tagsList.route.some((item)=>{
        return item.path === route.fullPath;
    });
    // 不存在则加入到路由数组中去
    !isExist && tagsList.route.push({
        path:route.fullPath,
        title:route.meta.title
    });
};


/*
    生命周期代码区域
*/
setRouteTags(route);

</script>

<style lang="scss" scoped>
.qilin-tagsView{
    width:100%;
    @include QilinFlex(space-between,center);
    position:relative;
    >.tagsView{
        width:100%;
        :deep(.el-tabs__item>span.is-active){
            color:#fff;
        }
    }
    >.el-tooltip__trigger{
        position:absolute;
        // top:0.571rem;
        top:10px;
        right:0.571rem;
        font-size:$size-text-large;
        color:$color-text-title-checked;
        cursor:pointer;
    }
}
:deep(.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable .is-icon-close),:deep(.el-tabs__item .is-icon-close){
    font-weight:bolder !important;
    font-size:$size-text-medium !important;
    &:hover{
        background-color:transparent !important;
    }
}
</style>
<style lang="scss">
.qilin-popover{
    padding:0 !important;
    .qilin-tagsView-operate-box{
        cursor:pointer;
        font-size:$size-text-default !important;
        >.qilin-tagsView-operate-box-list{
            border-bottom:1px solid $color-border;
            list-style-type: none;
            >.qiln-tagsView-operate-box-list-item{
                padding:$rem10;
                text-align:center;
                &:hover{
                    background-color:#f7f7f7;
                }
            }
        }
        >.qilin-tagsView-operate-all{
            text-align:center;
            &:nth-of-type(1){
                padding:$rem10 0 $rem5;
            }
            &:nth-of-type(2){
                padding:$rem5 0 $rem10;
            }
        }
    }
}
</style>
